<template>
  <view class="auxiliary-item flex">
    <u-image
      :width="208"
      :height="220"
      :src="image"
      style="margin-right: 30rpx; flex-shrink: 0"
    ></u-image>
    <view class="flex fd-column" style="flex: 1">
      <text class="commodity-name">{{ skuInfo.articleName }}</text>
      <text class="ss">品牌：{{ skuInfo.brand }}</text>
      <text class="ss">规格：{{ skuInfo.articleSpecification }}</text>
      <view class="flex align-center justify-between" style="margin-top: 16rpx">
        <text class="price-text">￥{{ skuInfo.sellingPrice }}</text>
        <u-number-box
          v-model="skuInfo.num"
          bg-color="#FFF"
          @change="onChange"
        ></u-number-box>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "AuxiliaryItem",
  props: {
    skuInfo: {
      type: Object,
      default: {},
    },
  },
  computed: {
    image() {
      return this.$zx.downloadBaseUrl + this.skuInfo.articleImg;
    },
  },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    onChange() {
      this.$emit("update");
    },
  },
};
</script>

<style lang="scss" scoped>
.auxiliary-item {
  width: 100%;
  background-color: #ffffff;
  padding: 24rpx;
  border-bottom: 1rpx solid #ccc;
}

.commodity-name {
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 40rpx;
  color: #333333;
}

.ss {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 40rpx;
  color: #666666;
  margin-top: 16rpx;
}

.price-text {
  font-size: 32rpx;
  font-family: SF Pro Display;
  font-weight: 400;
  line-height: 38rpx;
  color: #ea5646;
}
</style>
